<!--
 * @Description: 服务产品页面
 * @Author: 刘盛
 * @Date: 2021-08-10 13:23:06
 * @LastEditors: Jorven
 * @LastEditTime: 2022-05-15 09:25:59
-->
<template>
  <div>
    <!--头部-->
    <van-nav-bar
      title="服务产品"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <!--产品展示{{categoryData}}-->
    <div>
      <van-row>
        <van-col span="8">
          <!--v-model：双向数据绑定-->
          <van-sidebar v-model="activeKey" @change="onChange">
            <van-sidebar-item v-for ="item in categoryData" 
            :key="item.id" 
            :title="item.name" 
          />
          </van-sidebar>
        </van-col>
        <van-col span="16">
          <van-card v-for="item in productByCategoryData"
            :key="item.id"
            :price="item.price"
            :desc="item.description"
            :title="item.name"
            :thumb="item.photo"
            >
            <template #footer>
              <!--步进器-->
            <van-stepper default-value="0" min="0" v-model="item.num" @change="stepperChange" />
          </template>
          </van-card>
        </van-col>
      </van-row>
    </div>
    <!--购物车-->
    <van-submit-bar :price="totalPrice*100" button-text="提交订单" @submit="$router.push('orderConfirm')" 
    />

    
    
  </div>
</template>

<script>
import { pageQueryProductCategory, pageQueryProduct } from "@/api/index.js";
export default {
  data() {
    return {
      //当前导航项的索引
      activeKey: 0,
      //产品分类数据
      categoryData: [],
      //所有的产品数据
      productDataTotal: [],
      //步进器提供的数值
      //分类对应的产品
      productByCategoryData: [],
      //购物车总价格
      totalPrice: 0,
    };
  },
  computed: {},
  methods: {
        async loadCategory(){
      //pageQueryProductCategory方法的调用
      let res = await pageQueryProductCategory( {page:1, pageSize:5} );
      //console.log(res);
      //将响应合适的数据设置到数据模型中
      this.categoryData = res.data.data.list;
      //做上一页面的参数的数据比对，设置activeKey
      //获取上一页面带过来的数据
      console.log(this.$route.query.id);
      //箭头函数，遍历数组，与id进行匹配，匹配上了获取下标,设置activeKey
      this.categoryData.forEach((item, index) => {
        if (item.id == this.$route.query.id) {
          this.activeKey = index;
        }
      });
      this.loadProduct();
    },
    async loadProduct(){
      let res = await pageQueryProduct( {page:1, pageSize:1000} );
        this.productDataTotal = res.data.data.list;
        //过滤获取当前默认选中的分类下的产品
        this.productByCategoryData = this.productDataTotal.filter((item) => {
          return item.category.id == this.$route.query.id;
        });
    },
    //侧边导航发生变化，过滤出对应的产品
    onChange(index) {
        this.productByCategoryData = this.productDataTotal.filter((item) => {
          return item.category.id == this.categoryData[index].id;
      });
      //console.log(temp);
  },
// 步进器发生变化，计算总价(产品数组里的每个产品的价格*产品的数量)
    stepperChange() {
      // 从当前产品数组中，过滤出来产品数量大于0
      let temp = this.productDataTotal.filter((item) => {
        return item.num > 0;
      });
      let total = 0;
      temp.forEach((item) =>{
        total += item.num*item.price;
      });
      this.totalPrice = total;
    },
  },
  created() {
    this.loadCategory();
    //this.loadProduct();
  },
  mounted() {}
};

</script>
<style scoped>
.van-submit-bar {
  bottom: 50px;
}
.van-sidebar{
  width:100%;
}
</style>